<template>
    <div class="box">
        <navbar class="navbarBox" select="4"></navbar>
        <!-- 扫码 -->
        <div :style="{ background: $store.state.personality }" class="maxBox">
            <!-- <img src="../assets/erweima.png" alt="" style="width: 100%;" srcset=""> -->
            <div class="cpde fadeIn">
                <div style="width: 600px;">
                    <img alt src="@/assets/downloadApp/下载APP.png" srcset style="width: 100%;" />
                </div>
                <div class="flexSB" style="width: 200px;  margin-left: 200px; margin-top: 50px;">
                    <div class="codeBox">
                        <img alt src="@/assets/download.png" srcset style="width: 100px;" />
                    </div>
                    <div style="font-size: 14px;color: #555;">扫二维码下载</div>
                </div>

                <div class="followBox">
                    <!-- <div>关注我们:</div> -->
                    <div>在线客服:18198640015</div>
                </div>
            </div>

            <div class="phoneBox fadeIn2">
                <div>
                    <div class>
                        <div class>
                            <img alt src="//static.youku.com/ddshow/img/list/mobileNew.png" srcset style="width: 1000px;" />
                        </div>
                    </div>

                    <div class="line"></div>
                    <div></div>
                </div>

                <div class="carouselBox">
                    <el-carousel :interval="4000" height="70px" indicator-position="none">
                        <el-carousel-item>
                            <img alt src="@/assets/downloadApp/347.png" srcset style="width: 100%;" />
                        </el-carousel-item>
                        <el-carousel-item>
                            <img alt src="@/assets/downloadApp/347-隐私.png" srcset style="width: 100%;" />
                        </el-carousel-item>
                        <el-carousel-item>
                            <img alt src="@/assets/downloadApp/347-主播.png" srcset style="width: 100%;" />
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <!-- <div class="carouselBox2">
            <img :src="classObj[isShow]" alt="" srcset="" style="height: 100%;" class="imgBox animated fadeIn3">
                </div>-->

                <div class="carouselBox2">
                    <!-- 使用过渡效果包裹图片元素 -->
                    <transition mode="out-in" name="fade">
                        <img :key="currentImage" :src="currentImage" alt="Random Image" class="imgBox" style="height: 100%;" />
                    </transition>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
// @ is an alias to /src
import navbar from '@/components/navbar/navbar.vue'
import bottom from '@/components/bottom/bottom.vue'
import videoCom from '@/components/videoCom/videoCom.vue'
import { mapState } from 'vuex'

export default {
    name: 'home',
    components: {
        navbar,
        bottom,
        videoCom,
    },
    computed: {
        currentImage() {
            return this.images[this.currentImageIndex]
        },
    },
    data() {
        return {
            dataList: [
                {
                    title: '',
                },
            ],
            isShow: 0 /* 使初始图片随机 */,
            images: [
                require('@/assets/downloadApp/3.png'),
                require('@/assets/downloadApp/亲密私聊.png'),
                require('@/assets/downloadApp/网络表演赚钱.png'),
                // Add more image URLs here
            ],
            currentImageIndex: 0,
        }
    },

    mounted() {
        let i = Math.floor(Math.random() * 3)
        setInterval(() => {
            /* 定时器，每过s切换图片 */
            if (i > this.images.length - 1) i = 0
            this.isShow = i
            this.currentImageIndex++
            if (this.currentImageIndex == 3) {
                this.currentImageIndex = 0
            }
            i++
        }, 3000)
    },

    created() {},

    methods: {
        changeImage() {
            // 随机选择下一个图片索引
            this.currentImageIndex = Math.floor(Math.random() * this.images.length)
        },
    },
}
</script>
  
<style  lang="scss" scoped>
.imgBox {
    width: 140px;
    height: 140px;
    border-radius: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.maxBox {
    width: 100%;
    height: 100vh;
    background-color: #585858;
    position: fixed;
    padding-top: 100px;
}

.codeBox {
    width: 100px;
    height: 100px;
    background-color: #fff;
}

.cpde {
    position: absolute;
    right: 500px;
    top: 120px;
    animation: fadeIn 1s ease;
    /* 使用动画效果 */
}

.phoneBox {
    position: absolute;
    left: 25%;
    top: 120px;
    animation: fadeIn2 1s ease;
    /* 定义过渡效果 */
}

@keyframes fadeIn2 {
    from {
        opacity: 0;
        /* 初始状态透明度为 0 */
        left: -100px;
    }

    to {
        opacity: 1;
        /* 动画结束时透明度为 1 */
        left: 25%;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        /* 初始状态透明度为 0 */
        right: 0;
    }

    to {
        opacity: 1;
        /* 动画结束时透明度为 1 */
        right: 500px;
    }
}

.line {
    width: 800px;
    height: 90px;
    background-color: #231728;
    position: absolute;
    left: -800px;
    bottom: 75px;
    z-index: 0;
}

.followBox {
    margin-top: 200px;
    margin-left: 100px;
    font-size: 14px;
    color: #585858;
}

.box {
}

.custom-carousel-container {
    direction: rtl !important;
    /* 从右往左的布局方向 */
}

.carouselBox {
    width: 500px;
    position: absolute;
    right: 200px;
    top: 420px;
    background-color: #231728;
}

.carouselBox2 {
    width: 247px;
    position: absolute;
    height: 450px;
    right: 736px;
    top: 69px;
    background-color: #ffffff;
    z-index: 999999;
}

.imgBox {
    width: 150%;
    position: relative;
    top: -40px;
    right: 68px;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style>